<template>
	<view class="detail">
		<view class="poem-detail" v-if=" detail">
			<view class="p-title">{{detail.name}}</view>
			<!-- <view class="autor">{{detail.p_name}}</view> -->
			<view class="body" v-for="(item,index) in detail.body" :key="index">
				<view class="para">{{item.para}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		data() {
			return {
				pid:'',
				detail:[],
			}
		},
		async onLoad(p) {
			this.pid = p.pid
			let res = await api.GetPoemDetail(this.pid)
			this.detail = res
			console.log(res);
		}
	}
</script>

<style lang="scss">
page {
	background-color:#efefef;
}
.detail {
	position: relative;
	height: 100vh;
	background-color:#efefef;
}
.poem-detail {
	 padding-bottom: 80rpx;
	.p-title {
		color: #333333;
		font-size: 38rpx;
		font-weight: 600;
		padding: 38rpx;
	}
	.body {
		display: flex;
		width: 700rpx;
		text-indent: 32px;
		padding: 24rpx 0 24rpx 38rpx;
		.para {
			line-height: 40rpx;
		}
	}
}
.bottom {
	display: flex;
	position: fixed;
	bottom: 0;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: 120rpx;
	color: #3d3d3d;
	background-color: #efefef;
	.left,.center,.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: #efefef;
		border: 1rpx solid #cccbc6;
		color: #3d3d3d;
		image {
			width: 22rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}
	}
	.right {
		image {
			margin-left: 10rpx;
		}
	}
}
</style>
